import React from 'react'
import { UPLOAD_URL, ROOTURL } from './AppConfig'
import { Redirect, Link } from 'react-router-dom'
import { Waypoint } from 'react-waypoint'

const TalentItem = (props) => {
    return (
        <Link to={"/talentDetail/" + props.id}>
            <img src={UPLOAD_URL + props.pics[0] + '.jpg'} className="talentItemImage" />
            <div>
                <div>{props.title}</div>
                <div className="talentItemFooter">
                    <div className="talentItemPrice">￥{props.price} /{props.unit} </div>
                    <div className="talentItemView">
                        <div className="iconfont icon-browse">{props.viewcount}</div>
                    </div>
                </div>
            </div>
        </Link>
        );
}
export default class Talent extends React.Component {
    constructor(props) {
        super(props)
        this.redirect = this.redirect.bind(this);
        this.loadmore = this.loadmore.bind(this);
        this.state = {
            searchword: '',
            nextPage: 0,
            canloadmore: false,
            talentlist:[],
            redirectToCreateNew: false,            
        }
        this.handleSearch = this.handleSearch.bind(this)
        this.updateMarketList()
    }
    updateMarketList(kw = '', type = 0) {
        const postData = {
            'keyword': kw,
            'page': this.state.nextPage,
            'search_type': type
        }
        const postConfig = {
            'method': 'POST',
            'body': JSON.stringify(postData),
        }
        fetch(ROOTURL + 'talentlist.php', postConfig).then(
            response => response.json()
        ).then(json => {
            this.setState({
                talentlist: this.state.talentlist.concat(json.result),
                nextPage: this.state.nextPage + 1,
                canloadmore: json.result.length >=6
            })
        }).catch(
            error => { alert('网络错误无法加载物品: ' + error.toString()) }
        )
    }
    loadmore() {
        if (this.state.canloadmore)
            this.updateMarketList();
    }
    handleSearch(event) {
        this.setState({ searchword: event.target.value })
    }
    redirect(){
        this.setState({redirectToCreateNew : true})
    }    
    render() {
        if(this.state.redirectToCreateNew){
            return <Redirect to="/talentCreate" />
        }        
        const TalentList = this.state.talentlist.map((item) => {
            return (
                <div key={item.id} className="talentItem">
                    <TalentItem {...item} />
                </div>
            );
        })
        return (
            <div>
                <input type="text" 
                    value={this.state.searchword} 
                    onChange={this.handleSearch} 
                    className="form-control" 
                    placeholder="搜索"/>
                <div className="talentBox">{TalentList}</div>
                <Waypoint
                    onEnter={this.loadmore}
                />
                <div className="talentRelease">
                    <button className="btn btn-primary" onClick={this.redirect}>发布物品</button>
                </div>
            </div>
            );
    }
}